<script setup lang="ts">
import { onMounted, ref } from 'vue';
import { getChannelsAPI } from '../api/channel';
import { useChannelStore } from '../store/channel';
import { ChannelItem } from '../types/data';
// <!-- 7. 在两个子组件中， 删除掉difineProps和defineEmits -->
// 8. 从store中或channelId
const store = useChannelStore();

const channels = ref<ChannelItem[]>([]);
onMounted(async () => {
  const res = await getChannelsAPI();
  channels.value = res.data.channels;
});
</script>

<template>
  <div class="channel-nav">
    <nav class="list">
      <a
        class="item"
        :class="{ active: item.id === store.channelId }"
        href="javascript:;"
        v-for="item in channels"
        :key="item.id"
      >
        {{ item.name }}
      </a>
    </nav>
  </div>
</template>
